<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '../stores/counter'
import { ElButton, ElTooltip } from 'element-plus'
import { Moon, Sunny } from '@element-plus/icons-vue'

const appStore = useAppStore()

const themeIcon = computed(() => {
  return appStore.isDarkMode ? Sunny : Moon
})

const tooltipText = computed(() => {
  return appStore.isDarkMode ? '切换到亮色主题' : '切换到暗色主题'
})

function toggleTheme() {
  appStore.toggleTheme()
}
</script>

<template>
  <ElTooltip :content="tooltipText" placement="bottom">
    <ElButton 
      @click="toggleTheme" 
      circle 
      class="theme-switcher"
      :class="{ 'dark-mode': appStore.isDarkMode }"
    >
      <component :is="themeIcon" />
    </ElButton>
  </ElTooltip>
</template>

<style scoped>
.theme-switcher {
  transition: all 0.3s ease;
}

.theme-switcher:hover {
  transform: scale(1.05);
}

.theme-switcher.dark-mode {
  background-color: #374151;
  border-color: #4b5563;
  color: #f59e0b;
}

.theme-switcher.dark-mode:hover {
  background-color: #4b5563;
  border-color: #6b7280;
}
</style>
